@import "mixin.styl"


$color-green = rgb(59, 201 22)
$color-pink = rgb(255, 102, 159)
$color-blue = rgb(74, 171, 255)
$color-yellow = rgb(255, 198, 102)
$color-green-transparent = rgba(59, 201, 22, .5)
$color-pink-transparent = rgba(255, 102, 159, .5)
$color-blue-transparent = rgba(74, 171, 255, .5)
$color-yellow-transparent = rgba(255, 198, 102, .5)

// 由于stylus有不同，此处使用哈希
// css中数组是用括号
$moves =  ({startX: 0, startY: 0, endX: 0, endY: 55, width: 6, height: 6, background: $color-green}),
          ({startX: 0, startY: 0, endX: 15, endY: 60, width: 4, height: 4, background: $color-pink-transparent}),
          ({startX: 0, startY: 0, endX: 35, endY: 45, width: 4, height: 4, background: $color-blue-transparent}),
          ({startX: 0, startY: 0, endX: 50, endY: 25, width: 6, height: 6, background: $color-yellow}),
          ({startX: 0, startY: 0, endX: 60, endY: 0, width: 2, height: 2, background: $color-pink-transparent}),
          ({startX: 0, startY: 0, endX: 50, endY: -25, width: 6, height: 6, background: $color-blue}),
          ({startX: 0, startY: 0, endX: 40, endY: -30, width: 3, height: 3, background: $color-green-transparent}),
          ({startX: 0, startY: 0, endX: 20, endY: -55, width: 5, height: 5, background: $color-pink}),
          ({startX: 0, startY: 0, endX: 5, endY: -45, width: 4, height: 4, background: $color-green-transparent}),
          ({startX: 0, startY: 0, endX: -20, endY: -50, width: 2, height: 2, background: $color-pink-transparent}),
          ({startX: 0, startY: 0, endX: -40, endY: -50, width: 2, height: 2, background: $color-green-transparent}),
          ({startX: 0, startY: 0, endX: -55, endY: -30, width: 4, height: 4, background: $color-blue}),
          ({startX: 0, startY: 0, endX: -55, endY: -10, width: 3, height: 3, background: $color-yellow-transparent}),
          ({startX: 0, startY: 0, endX: -55, endY: -5, width: 3, height: 3, background: $color-green-transparent}),
          ({startX: 0, startY: 0, endX: -35, endY: -7, width: 2, height: 2, background: $color-pink-transparent}),
          ({startX: 0, startY: 0, endX: -45, endY: 10, width: 4, height: 4, background: $color-yellow-transparent}),
          ({startX: 0, startY: 0, endX: -50, endY: 25, width: 6, height: 6, background: $color-pink}),
          ({startX: 0, startY: 0, endX: -40, endY: 35, width: 4, height: 4, background: $color-green-transparent})



moveAnimation($index)
  $item = $moves[$index]
  keyframesName = "move" + $index
  $animationTime = .75s
  $animationType = linear
  $animationIterator = infinite
  $width = $item.width
  $height = $item.height
  $background = $item.background
  $startX = $item.startX
  $startY = $item.startY
  $endX = $item.endX
  $endY = $item.endY
  width: px2rem($width)
  height: px2rem($height)
  background: $background
  animation: move + $index $animationTime $animationType $animationIterator
  @keyframes {keyframesName}
    0% {
      transform: translate3d(px2rem($startX), px2rem($startY), 0) scale(0)
      opacity: 0
    }
    50% {
      transform: translate3d(px2rem($endX * 0.5), px2rem($endY * 0.5), 0) scale(.5)
      opacity: 1
    }
    90% {
      transform: translate3d(px2rem($endX), px2rem($endY), 0) scale(1)
      opacity: 1
    }
    100% {
      transform: translate3d(px2rem($endX * 1.05), px2rem($endY * 1.05), 0) scale(1)
      opacity: 1
    }
